/*
 * @Descripttion: 
 * @version: 
 * @Author: liyuhang
 * @Date: 2022-05-19 16:43:00
 */
Vue.component('cell-btns', {
    template: '\
        <div :style="boxStyle" class="cellbtns_box">\
            <div :style="boxItemStyle" ref="boxItem"  class="cellbtns_boxItem"\
               @touchmove="onTouchmove" @touchstart="onTouchstart" >\
                <div :style="leftStyle" class="cellbtns_left"  ><slot name="left"></slot></div>\
                <div :style="btnsStyle" class="cellbtns_right"  ref="rightbtn"  ><slot name="right"></slot></div>\
            </div>\
        </div>\
        ',
    props: {
        btnsWidth: {
            type: [String, Number],
            default () {
                return 100
            }
        },
        btnsHeight: {
            type: [String, Number],
            default () {
                return 60
            }
        }
    },
    computed: {
        leftStyle() {
            return 'height:' + this.btnsHeight + 'px;line-height:' + this.btnsHeight + 'px'
        },
        boxStyle() {
            return 'height:' + this.btnsHeight + 'px'
        },
        btnsStyle() {
            return 'width:' + this.btnsWidth + 'px;height:' + this.btnsHeight + 'px;line-height:' + this.btnsHeight + 'px'
        },
        boxItemStyle() {
            return this.styles + 'width:calc(100%+' + this.btnsWidth + 'px);height:' + this.btnsHeight + 'px'
        }
    },
    data() {
        return {
            pageXstart: 0,
            pageYstart: 0,
            styles: ''
        }
    },
    created() {
        this.$nextTick(() => {
            document.addEventListener('touchstart', (e) => {
                if (this.$refs.boxItem) {
                    if (!this.$refs.boxItem.contains(e.target)) {
                        this.styles = 'left:0px;'
                    }
                }
            })
        })
    },
    methods: {
        onTouchstart(event) {
            var e = event
            this.pageXstart = e.touches[0].pageX
            this.pageYstart = e.touches[0].pageY
        },
        onTouchmove(event) {
            var right = this.$refs.rightbtn
            var boxItem = this.$refs.boxItem
            var e = event
            var pageXmove = e.touches[0].pageX
            var pageYmove = e.touches[0].pageY
            var x = this.pageXstart - pageXmove
            var y = this.pageYstart - pageYmove
            if (x > right.scrollWidth) {
                this.styles = 'left:' + -right.scrollWidth + 'px;'
            }
            if (x < right.scrollWidth) {
                this.styles = 'left:0px;'
            }
            if (y > boxItem.scrollHeight) {
                this.styles = 'left:0px;'
            }
        }

    }
});